<template>
	<view class="my-userinfo">
		<view class="top-box">
        <image :src="userinfo.avatarUrl" mode="" class="avatar"></image>
      <view class="nickname">{{userinfo.nickName}}</view>
		</view>
    <view class="main-box">
      <!-- 头部 -->
      <view class="pain">
        <view class="pain-top">
          <view class="panel-item">
            <text>8</text>
             <text>收藏的店铺</text>
          </view>
          <view class="panel-item">
            <text>8</text>
             <text>收藏的商品</text>
          </view>
          <view class="panel-item">
            <text>8</text>
             <text>关注的商品</text>
          </view>
          <view class="panel-item">
            <text>8</text>
             <text>足迹</text>
          </view>
        </view>
      </view>
      <!-- 中 -->
      <view class="pain">
        <view class="pain-goods">
          <text>我的订单</text>
          <view class="pain-goods-list">
            <view class="pain-goods-item">
              <image src="/static/my-icons/icon1.png" class="icon"></image>
               <text>待付款</text>
            </view>
            <view class="pain-goods-item">
              <image src="/static/my-icons/icon2.png" class="icon"></image>
              <text>待收货</text>
            </view>
            <view class="pain-goods-item">
              <image src="/static/my-icons/icon3.png" class="icon"></image>
              <text>退款/退货</text>
            </view>
            <view class="pain-goods-item">
              <image src="/static/my-icons/icon4.png" class="icon"></image>
              <text>全部订单</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 下部 -->
      <view class="pain">
        <view class="pain-bottom">
          <view class="pain-bottom-list">
            <text>收货地址</text>
            <uni-icons type="arrowright" size="15"></uni-icons>
          </view>
          <view class="pain-bottom-list">
            <text>联系客服</text>
            <uni-icons type="arrowright" size="15"></uni-icons>
          </view>
          <view class="pain-bottom-list" @click="logout">
            <text>退出登录</text>
            <uni-icons type="arrowright" size="15"></uni-icons>
          </view>
        </view>
      </view>
      
    </view>
	</view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
    // computed:{
    //   // ...mapState('muser', ['userinfo'])
    // },
    props: ['userinfo'],
    methods:{
      ...mapMutations('muser', ['updataUserinfo', 'updataToken']),
      ...mapMutations('userAddress', ['addAddress']),
      async logout () {
       const [err, succ] = await uni.showModal({
            title: '退出提示',
            content: '您确定要退出吗？'
        }).catch(err => err)
        if (succ && succ.confirm) { // 点击了确认
         this.updataUserinfo({})
         this.updataToken('')
         this.addAddress({}) 
        }
      }
    }
	}
</script>

<style lang="scss">
.my-userinfo {
  height: 100%;
  background-color: #f4f4f4;
  .top-box {
    height: 400rpx;
    background-color: #c00000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 2px solid white;
      box-shadow: 0 1px 5px black;
    }
    .nickname {
          color: white;
          font-weight: bold;
          font-size: 16px;
          margin-top: 10px;
        }
  }
  .main-box {
    // padding:  0 10px;
    // position: relative;
    position: relative;
    top: -10px;
  }
  .pain {
    // width: 100%;
    margin: 0 10px 8px 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 3px;
    .pain-top {
      display: flex;
      justify-content: space-between;
    }
    .panel-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 13px;
    }
  }
  .pain-goods {
    display: flex;
    flex-direction: column;
    .pain-goods-list {
      border-top: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      padding-top:10px ;
      .pain-goods-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        image {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
  .pain-bottom-list {
   display: flex;
   justify-content: space-between;
   align-items: center;
   line-height: 45px;
  }
}
</style>
